import React from 'react';
import { inject, observer } from 'mobx-react';
import {WeaSearchGroup,WeaUpload,WeaRightMenu,WeaError} from "ecCom"
import { Button, Spin, Row, Col } from 'antd';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;


@observer
class InventoryListImport extends React.Component {
    constructor(props) {
        super(props);
	}
    componentDidMount(){
        const {contentStore} = this.props;
    }

    getCircle() {
        let style = {
            width: 20,
            height: 20,
            backgroundColor: '#D8D8D8',
            webkitBorderRadius: 10,
            mozBorderRadius: 10,
            msBorderRadius: 10,
            oBorderRadius: 10,
            borderRadius: 10,
            textAlign: 'center',
        }
        return style;
    }

    getForm() {
        const{ contentStore} = this.props;
        const{msg} = contentStore;

        let condition =
            [{
                "title": getLabel(24893, "基础信息"),
                "defaultshow": true,
                "items": [{
                    "checkbox": false,
                    "colSpan": 2,
                    "conditionType": "RESOURCEIMG",
                    "detailtype": 1,
                    "domkey": ["excelfile"],
                    "fieldcol": 18,
                    "hasBorder": false,
                    "helpfulTipProps": {},
                    "isQuickSearch": false,
                    "label": getLabel(16699, "Excel文件"),
                    "labelcol": 6,
                    "length": 0,
                    "precision": 0,
                    "showOrder": 0,
                    "stringLength": 0,
                    "tipPosition": "bottom",
                    "viewAttr": 2
                },{
                    "checkbox": false,
                    "colSpan": 2,
                    "conditionType": "BROWSER",
                    "detailtype": 1,
                    "domkey": ["templet"],
                    "fieldcol": 18,
                    "hasBorder": false,
                    "helpfulTipProps": {},
                    "isQuickSearch": false,
                    "label": 'Excel'+getLabel(64,"模板"),
                    "labelcol": 6,
                    "length": 0,
                    "precision": 0,
                    "showOrder": 0,
                    "stringLength": 0,
                    "tipPosition": "bottom",
                    "viewAttr": 2,
                    "value":""
                }]
            }, {
                "title": getLabel(19010,"操作说明"),
                "defaultshow": true,
                "items": [{
                    "index": 1,
                    "value": getLabel(510473,"第一步，点击生成模板，系统会自动下载标准Excel导入模板")
                }, {
                    "index": 2,
                    "value": getLabel(510474,"第二步，下载模板后，根据模板填写内容，请一定要确定你的Excel中文档的格式是模板中的格式，而没有被修改掉")
                }, {
                    "index": 3,
                    "value": getLabel(510475,"第三步，如果以上步骤和Excel文档正确的话，数据会被正确的导入，导入成功会有提示。如果有问题，则会提示Excel文档的错误之处")
                }]
            }]
        let _arr = [];

        condition.map((c, i) => {
            let arr = [];
            if (i == 0) { //基本信息
                c.items.map((field, index) => {
                    arr.push({
                        com: (
                            <div>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@16htuu@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7nsz7d@${index}`} span={1} offset={4}>
                                        <div style={{ marginTop: 15 }}>
                                            <div style={this.getCircle()}><div style={{ paddingTop: 2 }}>{index + 1}</div></div>
                                        </div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@atfeb8@${index}`} span={14}>
                                        <div style={{ marginTop: 15 }}>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@rbqfad@${index}`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6mjmtv@${index}`} span={field.labelcol}>{field.label}:</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xws9y1@${index}`} span={field.fieldcol}>
                                                    {this.getDom(field)}
                                                </Col>
                                            </Row>
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        ),
                        colSpan: 1,
                    })
                })
                //导入提示信息
                arr.push({
                    com: (
                        <div>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hyw8c3@importTip`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@u6pvfm@importTip`} offset={4}>
                                    <div dangerouslySetInnerHTML={{__html:"<font color='#FF0000'>"+msg+"</font>"}}></div>
                                </Col>
                            </Row>
                        </div>
                    ),
                    colSpan: 1,
                })
            }
            if (i == 1) { //导入说明
                c.items.map((field, index) => {
                    arr.push({
                        com: (
                            <div>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@qea7mx@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ng01nf@${index}`} span={1} offset={4} style={{ marginTop: 15 }}>
                                        <div style={this.getCircle()}>
                                            <div style={{ paddingTop: 2 }}>{index + 1}</div>
                                        </div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7ofr0g@${index}`} span={17} style={{ marginTop: 15 }}>
                                        {this.getIllustration(field.value, field.link, index, field)}
                                    </Col>
                                </Row>
                            </div>
                        ),
                        colSpan: 1
                    })
                })
            }
            _arr.push(<div><WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@3fdx9f@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={arr} col={1} /></div>)
        });
        return _arr;
    }

    getDom(field) {
        const {contentStore} = this.props;
        const{filelist,getExcelTemplate} = contentStore;
        let dom;
        let domkey = field.domkey;
        if (domkey&&domkey[0] == 'excelfile') {
            dom = (<div>
                <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@fbe5hn`}
                ref={ref => contentStore.remind = ref }  
                error={getLabel('384922','未选择Excel文件') }
                tipPosition="bottom"
                >
                <div style={{ float: 'left', marginTop: -10 }}>
                    <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@hx6col`}
                        uploadUrl='/api/doc/upload/uploadFile'
                        category='string'
                        limitType='xls'
                        maxFilesNumber={1}
                        datas={filelist}
                        onChange={(ids, list) => {
                                this.setFileId(ids, list)
                            }
                        } >
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@s4q0la`}>{getLabel(125333,"选择文件")}</Button>
                    </WeaUpload>
                </div>
                <div style={{ float: 'left', paddingLeft: 10 }}>
                    {filelist.length == 0 ?  <p>{getLabel(384040,"未选择任何文件")}</p> : filelist.map(file => <p>{file.filename}</p>)}
                </div>
                </WeaError>
            </div>)
        } else {
            dom = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@md7sqa`} style={{display:"inline",marginBottom:"5px"}} type="primary" onClick={()=>getExcelTemplate()}>{getLabel(15413,'生成')+getLabel(64,'模板')}</Button>
        }
        return dom;
    }

    getIllustration(val, url, index, link) {
        let p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
        // let tempurl = "/cpt/capital/InventoryListExcelToDB.xls?time="+new Date().getTime()
        // let p;
        // if (index == 0) {
        //     p = (<p>{val}：<a href={tempurl}>{getLabel(28446,"生成模板")}</a>,系统会自动下载标准Excel导入模板</p>);
        // } else  {
        //     p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
        // }
        return p;
    }


    render(){
        const{ spinning} = this.props.contentStore;
        return (
            <div className="prj-import" style={{height:'100%'}}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@8oq4zo`} datas={this.getRightMenu()}   >
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@wf8kfd`} spinning={spinning}>
                        {this.getForm()}
                    </Spin>
                </WeaRightMenu>
            </div>
        )
    }
    setFileId(ids, list) {
        const {contentStore} = this.props;
        contentStore.excelfile = ids;
        contentStore.filelist = list;
    }

    doFileChangeEvent=(e)=>{
        const{ contentStore} = this.props;
        if(e.currentTarget.files[0]){
            contentStore.hasExcelUpload(true);
		}else{
            contentStore.hasExcelUpload(false);
		}
    }

    getRightMenu() {
        const{ contentStore} = this.props;       
        const{doImport} = contentStore;
        let btns = [];
            btns.push({
                key: "importMain",
                icon: <i className='icon-coms-Approval-o' />,
                content: getLabel(615,'提交'),
                onClick: key => {  
                    doImport();
                }
            });
        return btns;
    }
   
}

export default InventoryListImport; 